<template>
	<view class="pageBg">
		<view class="container pageBg" >
		  <view class="form-container pageBg">
		    <!-- 手机号输入 -->
		    <view class="input-group">
		      <text class="label">手机号</text>
		      <input 
		        v-model="phoneNumber" 
		        class="input" 
		        type="number" 
		        placeholder="请输入手机号"
		        maxlength="11"
		      />
		    </view>
		
		    <!-- 验证码输入 -->
		    <view class="input-group">
		      <text class="label">验证码</text>
		      <input 
		        v-model="verificationCode" 
		        class="input" 
		        placeholder="请输入验证码"
		        maxlength="6"
		      />
			  <view class="input-group">
			  	<img class="sms-btn" :src="yanzhengma" @click="getYZM" alt="验证码">
			  </view>
		    </view>
		
		    <!-- 密码输入 -->
		    <view class="input-group">
		      <text class="label">密码</text>
		      <input 
		        v-model="password" 
		        class="input" 
		        password 
		        placeholder="请输入密码（6-20位）"
		      />
		    </view>
			<!-- 密码输入 -->
			<view class="input-group">
			  <text class="label">确认密码</text>
			  <input 
			    v-model="passwordPass" 
			    class="input" 
			    password 
			    placeholder="请输入确认密码（6-20位）"
			  />
			</view>
		
		    <!-- 邮箱输入 -->
		    <view class="input-group">
		      <text class="label">邮箱</text>
		      <input 
		        v-model="email" 
		        class="input" 
		        type="email" 
		        placeholder="请输入邮箱"
		      />
		    </view>
		
		    <!-- 注册按钮 -->
		    <button class="submit-btn" @click="handleSubmit">立即注册</button>
		  </view>
		</view>
	</view>
  
</template>

<script setup>
import { ref, computed ,onMounted} from 'vue'

// 响应式数据
const phoneNumber = ref('')
const password = ref('')
const passwordPass = ref('')
const email = ref('')
const yanzhengma = ref('')
const verifyCodeToken=ref('')
const verificationCode = ref('')


const getYZM = async () => {
		try {
			const res = await uni.request({
				url: 'http://localhost:8081/sysUser/generate/verify/code',
				method: 'GET'
			})
			console.log(res)
			yanzhengma.value = `data:image/jpeg;base64,${res.data.result.image}`
			verifyCodeToken.value=res.data.result.verifyCodeToken
		} catch (error) {
			console.error('请求失败:', error)
			uni.showToast({
				title: "验证码获取失败",
				icon: 'none'
			})
		}
	}
	// 页面挂载时自动触发
	onMounted(() => {
		console.log('页面初始化，开始请求验证码...')
		getYZM()
	})
// 提交注册
const handleSubmit = () => {
  // 表单验证
  if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
    uni.showToast({ title: '请输入有效的手机号', icon: 'none' })
    return
  }
  
  if (password.value.length < 6 || password.value.length > 20) {
    uni.showToast({ title: '密码需6-20位', icon: 'none' })
    return
  }
  
  if (!/^\w+@[a-z0-9]+\.[a-z]{2,4}$/i.test(email.value)) {
    uni.showToast({ title: '请输入有效的邮箱', icon: 'none' })
    return
  }
  if(passwordPass.value!=password.value){
	  uni.showToast({ title: '密码和确认密码不一致', icon: 'none' })
	  return
  }
  
  uni.request({
  	url:"http://localhost:8081/sysUser/userRegistration",
  	method: 'POST',
  	data: {
  		phoneNumber: phoneNumber.value,
  		password: password.value,
  		verificationCode: verificationCode.value,
  		verifyCodeToken: verifyCodeToken.value,
		email: email.value
  	}
  }).then((res)=>{
	  if(res.data.code == '200') {
	  	uni.showToast({
	  		title: '登录成功,账号已经发送方您邮箱!',
	  		icon: 'success'
	  	})
	  	// 登录成功后的处理
	  	uni.navigateTo({
	  	  url: '/pages/login/login'
	  	})
	  } else {
	  	getYZM()
	  	uni.showToast({
	  		title: res.data.message || '登录失败',
	  		icon: 'none'
	  	})
	  }  
  })
  
  uni.showToast({ title: '注册成功' })
  // 这里可以调用uni.request发送注册请求
}
</script>

<style scoped>
.container {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
}

.input-group {
  margin-bottom: 40rpx;
  position: relative;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.input {
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.sms-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 24rpx;
  padding: 0 30rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
}

.sms-btn[disabled] {
  background-color: #eee;
  color: #999;
}

.submit-btn {
  margin-top: 60rpx;
  background-color: #007AFF;
  color: white;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
}
</style>